<template>
  <el-dialog v-if="load" :title="title" v-model="visible" append-to-body :close-on-click-modal="false" class="full" :z-index="2000" width="1240px" @close="handleClose">
    <VTable v-if="tables.length === 1" v-bind="tables[0]"></VTable>
    <el-tabs v-else v-model="activeName">
      <el-tab-pane v-for="d in tables" :key="d.name" :label="d.title" :name="d.name" style="height: calc(98vh - 186px)">
        <VTable v-if="[3, 6].includes(activeName)" v-bind="d">
          <template #form="{ form }">
            <VSelect v-model="form.warehouse_id" placeholder="收货仓库" :options="options.warehouse" multiple collapse-tags style="min-width: 160px" />
          </template>
        </VTable>
        <VTable v-else v-bind="d" />
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <el-button @click="close">关 闭</el-button>
    </template>
    <Lock ref="lockRef" />
    <Logistics ref="logisticsRef" />
  </el-dialog>
</template>

<script setup lang="jsx">
import request from '@/utils/request'
import { to } from '@/utils/action'
import Lock from './Lock'
import Logistics from './Logistics'
const props = defineProps({
  options: { type: Object, default: () => ({}) },
  sale: Boolean,
})

const load = ref(false)
const visible = ref(false)
const activeName = ref(2)
const lockRef = ref()
const type = inject('type')
const path = props.sale ? 'list-intelligent-stock' : 'intelligent-stock'

const toWMS = (row) => {
  close()
  sessionStorage.setItem('_table_form', JSON.stringify({ tableForm: { skuRange: {type: 'sku', value:[row.sku ] }} }))
  to({ path: '/wms/overseasWarehouse/warehousePlatform' })
}
const toTC = (row) => {
  close()
  const paths = { path: `/head_procedure/orderManagement/warehouseList/detail`, query: {order_no: row.backup_warehouse_order_no} }
  to(paths)
}
const logisticsRef = ref()
const toLogistics = (row) => {
  const {sku,backup_warehouse_order_no} = row
  logisticsRef.value.open({sku,customer_order_no:backup_warehouse_order_no})
}
const configs = {
  1: {
    name: 1,
    title: '本地仓可用',
    columns: [
      { title: '仓库类型', field: 'wms_attribute_name' },
      { title: '仓库名称', field: 'warehouse_name' },
      { title: '待入库', field: 'transit_num' },
      { title: '可用库存', field: 'num' },
      { visible: type === 3, title: '运营人员', field: 'sale_name' },
    ],
    query: (data) => request({ url: `/v1/purchase-demand/${path}/get-stock`, method: 'post', data })
  },
  2: {
    name: 2,
    title: '海外仓可用',
    columns: [
      { title: '仓库类型', field: 'wms_attribute_name' },
      { title: '仓库名称', field: 'warehouse_name' },
      { title: '待入库', field: 'transit_num' },
      { title: '可用库存', field: 'num' },
      { visible: type === 3, title: '运营人员', field: 'sale_name' },
      { title: '已锁定库存', field: 'lock_num', slots: {
        default: ({row}) => <VText value={row.lock_num} type={row.lock_num ? 'button' : ''} onClick={() => lockRef?.value.open(row)} />
      } },
    ],
    query: (data) => request({ url: `/v1/purchase-demand/${path}/get-stock`, method: 'post', data })
  },
  3: {
    name: 3,
    title: '海外仓在途',
    columns: [
      { title: '备货单号', field: 'backup_warehouse_order_no', width: 180, slots: {
        default: ({row}) => <VText value={row.backup_warehouse_order_no} type='link' line={2} onClick={() => toTC(row)} />
      } },
      { title: '状态', field: 'status', width: 70 },
      {
        title: 'sku', field: 'sku', width: 80, slots: {
          default: ({ row }) => <div>
            <VText value={row.sku} />
            <VText value='库龄查看' type="link" onClick={() => toWMS(row)} />
          </div>
        }
      },
      { title: '发货仓库', field: 'out_warehouse_name', width: 90 },
      { field: 'tracking_cost', width: 100, slots: {
        header: () => <div>加权运费<br/>加权采购成本</div>,
        default: ({row}) => <div>
          <VText value={row.tracking_cost} />
          <VText value={row.weighted_cost} />
        </div>
      } },
      { title: '运输方式', field: 'shipping_type', width: 74 ,slots: {
        default: ({row}) => <div>
          <VText value={row.shipping_type} />
           <VText value='物流状态' type="link" onClick={() => toLogistics(row)} />
        </div>
      }},
      { field: 'send_num', width: 74, slots: {
        header: () => <div>发货数量<br/>收货数量</div>,
        default: ({row}) => <div>
          <VText value={row.send_num} />
          <VText value={row.get_goods_num} />
        </div>
      } },
      { title: '剩余收货数量', field: 'end_num', width: 70 },
      { title: '收货仓库', field: 'in_warehouse_name' },
      { field: 'outstock_join_time', slots: {
        header: () => <div>发货时间<br/>收货时间</div>,
        default: ({row}) => <div>
          <VText value={row.outstock_join_time} />
          <VText value={row.get_goods_time} />
        </div>
      } },
      { title: '预计到货时间', field: 'eta_date' },
      { visible: type === 3, title: '运营人员', field: 'sale_name' },
    ],
    query: (data) => request({ url: `/v1/purchase-demand/${path}/get-oversea-transit`, method: 'post', data })
  },
  6: {
    name: 6,
    title: '海外仓完结',
    columns: [
      { title: '备货单号', field: 'backup_warehouse_order_no', width: 180, slots: {
        default: ({row}) => <VText value={row.backup_warehouse_order_no} type='link' line={2} onClick={() => toTC(row)} />
      } },
      { title: '状态', field: 'status', width: 70 },
      {
        title: 'sku', field: 'sku', width: 80, slots: {
          default: ({ row }) => <div>
            <VText value={row.sku} />
            <VText value='库龄查看' type="link" onClick={() => toWMS(row)} />
          </div>
        }
      },
      { title: '发货仓库', field: 'out_warehouse_name', width: 90 },
      { field: 'tracking_cost', width: 100, slots: {
        header: () => <div>加权运费<br/>加权采购成本</div>,
        default: ({row}) => <div>
          <VText value={row.tracking_cost} />
          <VText value={row.weighted_cost} />
        </div>
      } },
      { title: '运输方式', field: 'shipping_type', width: 74 },
      { field: 'send_num', width: 74, slots: {
        header: () => <div>发货数量<br/>收货数量</div>,
        default: ({row}) => <div>
          <VText value={row.send_num} />
          <VText value={row.get_goods_num} />
        </div>
      } },
      { title: '剩余收货数量', field: 'end_num' },
      { title: '收货仓库', field: 'in_warehouse_name' },
      { field: 'outstock_join_time', slots: {
        header: [
          {title: '发货时间'},
          {title: '收货时间', sort: 'get_goods_time'},
        ],
        // () => <div>发货时间<br/>收货时间</div>,
        default: ({row}) => <div>
          <VText value={row.outstock_join_time} />
          <VText value={row.get_goods_time} />
        </div>
      } },
      { title: '预计到货时间', field: 'eta_date' },
      { visible: type === 3, title: '运营人员', field: 'sale_name' },
    ],
    query: (data) => request({ url: `/v1/purchase-demand/${path}/get-oversea-complete`, method: 'post', data })
  },
  4: {
    name: 4,
    title: '采购在途',
    columns: [
      { title: '采购单号', field: 'purchase_no', width: 140 },
      { title: '状态', field: 'audit_status_name' },
      { title: '国家', field: 'country_name' },
      { title: 'sku', field: 'sku' },
      { title: '自定义sku', field: 'custom_sku' },
      { title: '销售人员', field: 'sale_name', slots: {
        default: ({row}) => <VText value={(row.sale || []).map(d => `${d.sale_name}${d.purchase_num}`).join(';')} line={2} />
      } },
      { title: '供应商代码', field: 'supplier_code' },
      { title: '收货仓库', field: 'destination_warehouse_name' },
      { title: '采购数量', field: 'purchase_num',width: 80 },
      { title: '未到货数量', field: 'un_inbound_num' },
      { title: '下单时间', field: 'create_time' },
      { title: '预计到货时间', field: 'expect_delivery_time', width: 110 },
      { title: '目的仓', field: 'warehouse_name' },
    ],
    query: (data) => request({ url: `/v1/purchase-demand/${path}/get-purchase-transit`, method: 'post', data })
  },
  5: {
    name: 5,
    title: '未配货预出数',
    columns: [
      { title: '订单号', field: 'order_sn' },
      { title: '状态', field: 'order_status_desc' },
      { title: 'sku', field: 'sku' },
      { title: '国家', field: 'country_name' },
      { title: '仓库', field: 'ship_warehouse_name' },
      { title: '运输方式', field: 'shipping_method' },
      { title: '发货数量', field: 'quantity' },
      { title: '发货时间', field: 'shipping_time' },
      { title: '订单备注', field: 'order_remark' },
      { visible: type === 3, title: '运营人员', field: 'sale_name' },
    ],
    query: (data) => request({ url: `/v1/purchase-demand/${path}/get-order-delivery`, method: 'post', data })
  },
  7: {
    name: 7,
    title: '待下PO',
    columns: [
      { title: 'PR单号', field: 'demand_no' },
      { title: '状态', field: 'sku_purchase_status_name' },
      { title: 'sku', field: 'sku', width: 80 },
      { title: '需求ID', field: 'sku_no' },
      { title: '自定义SKU', field: 'custom_sku' },
      { title: '销售人员', field: 'sale_name', width: 90 },
      { title: '需求数量', field: 'demand_num', width: 80 },
      { title: '待下单数量', field: 'wait_order_num', width: 90 },
      { title: '需求时间', field: 'demand_time', width: 100 },
      { title: '申请时间', field: 'demand_create_time' },
      { title: '目的仓', field: 'warehouse_name' },
    ],
    query: (data) => request({ url: `/v1/purchase-demand/${path}/get-wait-purchase`, method: 'post', data })
  },
  8: {
    name: 8,
    title: '本地仓待发',
    columns: [
      { title: '头程单号', field: 'backup_warehouse_order_no' },
      { title: '状态', field: 'status' },
      { title: 'sku', field: 'sku', width: 80 },
      { title: '国家', field: 'country_name' },
      { visible: type === 3,title: '销售人员', field: 'sale_name', width: 90 },
      { title: '锁定数量', field: 'send_num', width: 80 },
      { title: '发货仓', field: 'out_warehouse_name' },
      { title: '目的仓', field: 'warehouse_name' },
      { title: '计划发货时间', field: 'deliver_goods_time' },
    ],
    query: (data) => request({ url: `/v1/purchase-demand/${path}/get-oversea-transit`, method: 'post', data })
  },
  9: {
    name: 9,
    title: '其他在途',
    columns: [
      { title: '来源单号', field: 'order_no' },
      { title: '类型', field: 'op_type_cn' },
      { title: '状态', field: 'status_cn', width: 100 },
      { title: 'sku', field: 'sku', width: 100 },
      { title: '发货仓库', field: 'out_warehouse_name' },
      { title: '计划数量', field: 'plan_num', width: 100 },
      { title: '在途数量', field: 'transit_num', width: 100 },
      { title: '收货仓库', field: 'in_warehouse_name' },
    ],
    query: (data) => request({ url: `/v1/purchase-demand/${path}/get-oversea-other-transit`, method: 'post', data })
  },
}

const title = ref('')
const tables = ref([])
const optionConfig = {
  border: true,
  autoResize: true,
  height: 'auto',
  columnConfig: {
    resizable: true
  },
  // formConfig: {
  //   data: {
  //     warehouse_id: ''
  //   }
  // },
  rowClassName: ({row}) => row.is_red ? 'bg-error' : '',
  pagerConfig: {
    enabled: true,
    pageSize: 20
  },
}

// 打开弹窗
const open = async (types, row, { str = '', is_send = 1 } = {}) => {
  if (!load.value) {
    load.value = true
    await 1
  }
  if (!Array.isArray(types)) {
    types = [types]
  }
  types.forEach(ty => {
    const config = configs[ty]
    const { sku, country, warehouse_id, sale_id } = row
    const params = { sku: [sku], warehouse_attr: ty, pageSize: 20, pageNum: 1, type, warehouse_id: warehouse_id ? [warehouse_id] : [], sale_id: sale_id ? [sale_id] : [], is_send }
    if (ty !== 1) {
      params.country = [country]
    }
    const tableOptions = Object.assign({}, optionConfig, config, {
      proxyConfig: { ajax: { query: ({form, page}) => config.query({...params, ...page, ...form}) }, props: { result: 'data', total: 'total' } }
    })
    tables.value.push(tableOptions)
  })
  activeName.value = tables.value[0].name
  title.value = str || tables.value[0].title

  visible.value = true
}
// 关闭弹窗
const close = () => {
  visible.value = false
}

const handleClose = () => {
  tables.value = []
}

defineExpose({ open })
</script>